<template>
  <div class="vote-detail-easy">
    <div class="header" style="display:block;height:3.76rem;width:100%;backgroundSize:100%;position: relative" :style="{backgroundImage: 'url(' +detail.voteCoverUrl+ ')'}">
      <div class="title">{{detail.voteTitle}}</div>
    </div>
    <div class="vote">
      <div class="data-display flex-cont">
        <div class="data-item flex">
          <div class="flex-cont">
            <img src="../../images/voteUser.png" alt="" class="vote-user">
            <span>投票人</span>
          </div>
          <div class="num">{{detail.turnout}}</div>
        </div>
        <div class="data-item flex">
          <div class="flex-cont">
            <img src="../../images/voteNum.png" alt="" class="vote-num">
            <span>投票数</span>
          </div>
          <div class="num">{{detail.obtained}}</div>
        </div>
        <div class="data-item flex">
          <div class="flex-cont">
            <img src="../../images/watch1.png" alt="" class="watch-num">
            <span>浏览量</span>
          </div>
          <div class="num">{{detail.totalBrowsing}}</div>
        </div>
      </div>
      <div class="time">
        <div>投票开始时间：{{detail.voteStartTime}}</div>
        <div>投票截止时间：{{detail.voteEndTime}}</div>
      </div>
    </div>
    <div class="form-modal flex-box-align">
      <div class="btn-get" :class="{noClick: detail.isAsseted == 'y'}" @click="handleGet">领取投票代币</div>
      <div>
        <div class="search-modal">
          <search
            @result-click="resultClick"
            @on-change="getResult"
            :results="results"
            v-model="value"
            :auto-fixed="true"
            @on-focus="onFocus"
            @on-cancel="onCancel"
            placeholder="请输入选项编号或名称"
            :auto-scroll-to-top="true"
            ref="search"></search>
        </div>
      </div>
    </div>
    <div class="vote-list borderTop">
      <div style="margin-bottom: .47rem;">{{detail.voteTitle}}</div>
      <ul>
        <li v-for="(item, index) in detail.voteOptionList" :key="index" @click="handleClickRadio(item.optionId)">
          <div class="flex-box-align" style="margin-bottom: .23rem;">
            <div class="selected" v-if="select == item.optionId">
              <div></div>
            </div>
            <div class="default" v-else></div>
            <span class="flex" style="margin-left: .18rem">{{item.optionContent}}</span>
            <p style="color: #DE2525">{{item.turnout}}票</p>
          </div>
          <div style="word-break: break-all;color: #666;font-size: .28rem;">区块链地址：{{item.optionAddress}}
            <button class="btn-copy" type="button"
                    v-clipboard:copy.stop="item.optionAddress"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError">复制</button>
          </div>
        </li>
      </ul>
      <div class="btn-vote" @click="handleClickVote" v-if="detail.voteOptionList.length">投票</div>
    </div>
    <ul class="detail-nav-list flex-cont">
      <li :class="{active: active == 'all'}" @click="linkToDetail">全部选项</li>
      <li :class="{active: active == 'rank'}" @click="$router.replace({path:'voteRank',query: {id: id}})">当前排名</li>
      <li :class="{active: active == 'brief'}" @click="$router.replace({path:'voteBrief',query: {id: id}})">活动介绍</li>
    </ul>
  </div>
</template>

<script>
  import { Search } from 'vux'
  import {parseUrlParams} from "../../util";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    components: {
      Search
    },
    data () {
      return {
        detail: {},
        select: "",
        voteId: "",
        active: "all",
        results: [],
        value: "",
      }
    },
    mounted(){
      this.id = parseUrlParams("id")
      this.getDetail()
    },
    methods:{
      getDetail() {
        common.requestAjax(CONSTANT.URL.VOTE.VOTEDETAIL, {}, {voteId: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {
            this.detail = res.data.bussData
            let optionList = res.data.bussData.voteOptionList;
            this.select = optionList.length ? optionList[0].optionId : "";
            this.voteId = optionList.length ? optionList[0].voteId : "";
          }
        })
      },
      handleGet() {
        let self = this;
        common.requestAjax(CONSTANT.URL.VOTEOPTION.OPTION, {}, {voteId: parseUrlParams("id")}, (res) => {
          if (res.status == 200) {
            this.detail.isAsseted = "y"
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {
              },
              onHide () {
              },

            })
          }
          if (res.status == 500) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
                console.log("iiii")
              },
              onConfirm() {
                console.log("xvvxcv")
              }
            })
          }
        })
      },
      handleClickRadio(id) {
        this.select = id
      },
      handleClickVote() {
        if(this.detail.isAsseted == 'n') {
          this.$vux.alert.show({
            title: "提示",
            content: "请先领取投票代币",
            onShow () {

            },
            onHide () {
            }
          })
          return false;
        }
        let self = this;
        common.requestAjax(CONSTANT.URL.VOTEOPTION.VOTE, {}, {voteId: this.voteId, optionId: this.select}, (res) => {
          if (res.status == 200) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
                self.getDetail()
              },

            })
          }
          if (res.status == 500) {
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
              }
            })
          }
        })
      },
      handleClickNav(val) {
        this.active = val
      },
      linkToDetail() {
        if (this.detail.voteOptionType == "1") {
          this.$router.replace({path: '/voteDetailEasy',query: {id: this.id}})
        } else if(this.detail.voteOptionType == "2") {
          this.$router.replace({path: '/voteDetail',query: {id: this.id}})
        }
      },
      resultClick (item) {
        this.$router.push({path: '/optionDetail', query: {json: JSON.stringify(item)}})
      },
      getResult (val) {
        console.log('on-change', val)
        this.results = val ? this.getResult1(val) : []
      },
      getResult1(val) {
        let rs = [];
        for (let i = 0; i < this.detail.voteOptionList.length; i++) {
          if (this.detail.voteOptionList[i].optionContent.indexOf(val) != -1) {
            this.detail.voteOptionList[i] = Object.assign(this.detail.voteOptionList[i], {title: this.detail.voteOptionList[i].optionContent})
          }
        }
        rs = this.detail.voteOptionList
        rs = rs.filter( item => {
          return item.optionContent.indexOf(val) != -1
        })
        return rs
      },
      onSubmit () {
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      },
      onCopy(val) {
        this.$vux.alert.show({
          title: "提示",
          content: "复制成功",
          onShow () {

          },
          onHide () {
          }
        })
        event.cancelBubble = true;
      },
      onError() {

      }
    },
  }
</script>

<style lang="scss">
  .vote-detail-easy {
    height: 100%;
    background-color: #fff;
    font-size: .32rem;
    .borderTop {
      border-top: 1px solid #DEDEDE;
    }
    .header {
      .title {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        line-height: .6rem;
        height: .6rem;
        text-align: center;
        font-size: .34rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
      }
    }
    .vote {
      padding: .25rem .3rem .37rem .3rem;
      background-color: #fff;
      .data-display {
        .data-item {
          font-size: .32rem;
          text-align: center;
          .num {
            color: #D82121;
          }
          img {
            vertical-align: middle;
            margin-right: .15rem;
          }
          .vote-user {
            width: .27rem;
            height: .29rem;
          }
          .vote-num {
            width: .41rem;
            height: .28rem;
          }
          .watch-num {
            width: .3rem;
            height: .2rem;
          }
        }
      }
      .time {
        text-align: center;
        font-size: .28rem;
        div:first-child {
          color: #198AE7;
          margin-top: .4rem;
          /*margin-bottom: .23rem;*/
          margin-bottom: .1rem;
        }
        div:last-child {
          color: #E02D2D;
        }
      }
    }

    .form-modal {
      padding: 0 .68rem .37rem .68rem;
      background-color: #fff;
      .btn-get.noClick {
        pointer-events: none;
        background-color: #ccc;
      }
      .btn-get {
        padding: .16rem .24rem;
        white-space: nowrap;
        background-color: #198AE7;
        text-align: center;
        color: #fff;
        font-size: .28rem;
        border-radius: .1rem;
        margin-right: .3rem;
      }
      .search-modal {
        .weui-search-bar__label span {
          font-size: 12px!important;
        }
        .weui-cells.vux-search_show {
          height: 100%;
        }
        .weui-search-bar {
          padding: 0!important;
        }
        .vux-search-fixed {
          .weui-search-bar {
            padding: 8px 10px!important;
          }
        }
          input{
            font-size: 12px!important;
          }
        .vux-search-box.vux-search-fixed {
          .weui-search-bar__cancel-btn {
            display: block;
          }
        }
        .vux-search-box {
          .weui-search-bar__cancel-btn {
            display: none;
          }
        }
      }
    }
    .vote-list {
      padding: .54rem .64rem;
      margin-bottom: .98rem;
      background-color: #fff;
      .btn-vote {
        width: 3.12rem;
        height: .78rem;
        line-height: .78rem;
        text-align: center;
        margin: .58rem auto;
        background-color: #198AE7;
        border-radius: .1rem;
        color: #fff;
      }
      ul {
        padding: .2rem 0;
        li {
          /*padding: 0 .3rem;*/
          position: relative;
          margin-bottom: .8rem;
          &:after {
            content: "";
            width: 100%;
            position: absolute;
            bottom: -.4rem;
            left: 0;
            height: 1px;
            background-color: #dedede;
          }
          &:last-child {
            margin-bottom: 0;
          }
          .default {
            width: .32rem;
            height: .32rem;
            border: 1px solid #dedede;
            border-radius: 50%;
          }
          .selected {
            width: .32rem;
            height: .32rem;
            line-height: .32rem;
            text-align: center;
            border: 1px solid #198AE7;
            border-radius: 50%;
            position: relative;
            div {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: .16rem;
              height: .16rem;
              border-radius: 50%;
              background-color: #198AE7;
            }
          }
          .btn-copy {
            display: inline-block;
            background-color: #198AE7;
            color: #fff;
            font-size: .26rem;
            padding: 2px .3rem;
            border-radius: .1rem;
            margin-left: .3rem;
            border: none;
          }
        }
      }
    }
    .detail-nav-list {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      &:after {
        content:"";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #d1d1d1;
        left: 0;
        right: 0;
        top: 0;
        transform: scaleY(.5);
      }
      li {
        height: .98rem;
        line-height: .98rem;
        text-align: center;
        flex: 1;
        -webkit-flex: 1;
        color: #fff;
        background-color: #000;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: #fff;
          right: 0;
          bottom: 0;
          top: 0;
          transform: scaleX(.5);
        }
        &:active {
          opacity: .6;
        }
      }
      li.active {
        color: #198AE7;
        background-color: #fff;
      }
    }
  }
</style>
